<template>
  <div class="Addnewaddress">
    <CommonHeader title="添加收货地址">
      <template #left>
        <div>
          <Icon name="zuojiantou"></Icon>
          <span>返回</span>
        </div>
      </template>
    </CommonHeader>
    <!-- 新增地址表单 -->
    <div class="form">
      <!-- 姓名 -->
      <div class="form_item">
        <div class="label">姓名</div>
        <div class="input">
          <input
            type="text"
            v-model="addressForm.username"
            placeholder="请输入收货人"
          />
        </div>
      </div>
      <!-- 电话 -->
      <div class="form_item">
        <div class="label">电话</div>
        <div class="input">
          <input
            type="text"
            v-model="addressForm.userphone"
            placeholder="请输入手机号"
          />
        </div>
      </div>
      <!-- 地区 -->
      <div class="form_item" @click="popupVisible = true">
        <div class="label">地区</div>
        <div class="input">
          <input
            type="text"
            readonly
            placeholder="选择省/市/区"
            v-model="addressForm.location"
          />
        </div>
        <Icon name="youjiantou" color="#ccc"></Icon>
      </div>
      <!-- 详细地址 -->
      <div class="form_item">
        <div class="label">详细地址</div>
        <div class="input">
          <input
            type="text"
            v-model="addressForm.useraddress"
            placeholder="请输入详细地址"
          />
        </div>
      </div>
      <!-- 是否 设为默认收货地址 -->
      <div class="form_item">
        <div class="label">是否设为默认收货地址</div>
        <div class="switch" @click="addressForm.status = !addressForm.status">
          <span class="slider" :class="{ active: addressForm.status }"></span>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <Popup
      :isShow="popupVisible"
      @update:isShow="popupVisible = $event"
      @confirm="onConfirm"
    >
    </Popup>

    <!-- 保存和删除按钮 -->
    <div class="btn">
      <div class="save" @click="saveAddress">保存</div>
      <div class="delete">删除</div>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/common/publicHeader/index.vue';

import Popup from '@/components/common/popup/index.vue';
import { addAddressAPI } from '@/api/cart';
import Message from '@/utils/message';

export default {
  name: 'Addnewaddress',
  components: {
    CommonHeader,
    Popup,
  },
  data() {
    return {
      popupVisible: false,
      isDefault: false,
      // 地区选择器数据
      areaInput: '',
      // 新增地址表单数据
      addressForm: {
        uid: '',
        username: '',
        userphone: '',
        location: '',
        useraddress: '',
        status: 0,
      },
    };
  },
  methods: {
    // 收取弹窗数据
    onConfirm(data) {
      this.addressForm.location = [data.province, data.city, data.area]
        .map(item => item?.label || '')
        .filter(label => label) // 可选：去掉空项
        .join('/')
        .trim();
    },
    // 跳回地址列表页
    async saveAddress() {
      const { uid } = JSON.parse(localStorage.getItem('userinfo'));
      this.addressForm.uid = uid;
      this.addressForm.status = this.addressForm.status ? 1 : 0;
      const res = await addAddressAPI(this.addressForm);
      const { code, msg } = res;
      if (code === 200) {
        Message.success(msg);
        this.$router.push({
          name: 'addressList',
        });
      } else {
        Message.error(msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Addnewaddress {
  height: 100vh;
  background-color: #f5f5f5;
  padding: 10px;

  .form {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;

    .form_item {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 15px 0;
      border-bottom: 1px solid #ccc;

      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      .label {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        line-height: 20px;
      }

      .input {
        flex: 1;
        display: flex;
        align-items: center;

        input {
          width: 100%;
          height: 100%;
        }
      }

      .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        margin-left: auto;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 34px;
      }

      .slider:before {
        position: absolute;
        content: '';
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
      }

      .slider.active {
        background-color: #2196f3;
      }

      .slider.active:before {
        transform: translateX(26px);
      }
    }
  }
}

.btn {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  gap: 15px;

  .save,
  .delete {
    width: 100%;
    height: 40px;
    background-color: #ff6140;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
  }

  .delete {
    background-color: transparent;
    color: #ff6140;
    border: 1px solid #ccc;
  }
}
</style>
